<script lang="ts" setup>
type ButtonAppearance = 'outline' | 'primary' | 'subtle' | 'transparent';
type ButtonShape = 'circular' | 'rounded' | 'square';
type ButtonSize = 'large' | 'medium' | 'small';

withDefaults(
  defineProps<{
    appearance?: ButtonAppearance;
    disabled?: boolean;
    iconOnly?: boolean;
    shape?: ButtonShape;
    size?: ButtonSize;
  }>(),
  {
    appearance: 'primary',
    disabled: false,
    iconOnly: false,
    shape: undefined,
    size: undefined,
  },
);

const emit = defineEmits<{
  click: [event: Event];
}>();

const handleClick = (event: Event) => {
  emit('click', event);
};
</script>

<template>
  <fluent-menu-button
    :appearance="appearance"
    :disabled="disabled"
    :shape="shape"
    :size="size"
    :icon-only="iconOnly"
    @click="handleClick"
  >
    <slot></slot>
  </fluent-menu-button>
</template>

<style scoped></style>
